<script setup>
</script>

<template>
  <h1 class="bg-blue-500 text-white">bg text</h1>  
  <div class="text-red-500 text-2xl">hello world</div>

  <div class="bg-red-500 hover:bg-red-700 text-white">hehe</div>
  <!-- 需要开启属性化预设 presetAttributify -->
  <!-- 属性化预设按照class前缀来分组，减少代码量，提高可读性 -->
  <div 
    class="text-pink"
    bg="blue-400 hover:blue-500"
  >haha</div>

  <!-- 需要开启图标预设： -->
  <!-- An orange alarm from Material Design Icons -->
  <div class="i-mdi-alarm text-orange-400" />
  <div class="i-mdi-account" />
  <div class="i-mdi-account-remove" />
  <!-- A basic anchor icon from Phosphor icons -->
  <div class="i-ph-anchor-simple-thin" />
  <!-- A large Vue logo -->
  <div class="i-logos-vue text-3xl" />
  <!-- Sun in light mode, Moon in dark mode, from Carbon -->
  <button class="i-carbon-sun dark:i-carbon-moon" />
  <!-- Twemoji of laugh, turns to tear on hovering -->
  <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
</template>

<style scoped>
</style>
